<template>
  <div class="flex flex-col min-h-screen">
    <!-- 背景图片 -->
    <img src="../../public/images/home-bg.png" alt="bg-image" class="w-screen fixed top-0 left-0 z-0" />
    <!-- 顶部导航栏 -->
    <nav class="text-black relative bg-none p-4 w-3/4 ml-14">
      <div class="flex justify-between items-center">
        <span class="text-4xl font-bold">皮肤病分类与识别系统</span>
        <ul class="flex space-x-4 text-2xl shadow-2xl rounded-2xl px-10 py-4 items-center">
          <li><a href="#" class="hover:text-blue-200" @click.prevent="goToDiseases">分类</a></li>
          <li><a href="#" class="hover:text-blue-200">识别</a></li>
          <li><a href="#" class="hover:text-blue-200" @click.prevent="goToFeedback">反馈</a></li>
          <li><a href="#" class="hover:text-blue-200">关于我们</a></li>
          <li>
            <el-cascader v-model="value" :options="options" size="large" placeholder="选择您想查看的皮肤病" clearable="clearable" @change="handleChange" />
          </li>
        </ul>
      </div>
    </nav>
    <!-- 侧边栏 -->
    <aside class="bg-white shadow-2xl rounded-2xl w-1/5 p-4 fixed top-0 right-0 bottom-0 overflow-y-auto">
      <div class="flex flex-col space-y-4">
        <!-- 用户信息 -->
        <div class="flex flex-col items-center justify-center p-4 bg-none shadow-2xl rounded-xl cursor-pointer" @click="goToUserCenter">
          <img :src="userInfo.avatar" alt="用户头像" class="w-12 h-12 object-cover rounded-full" v-if="userInfo.avatar" />
          <h3 class="text-xl font-bold mt-2">{{ userInfo.name }}</h3>
          <p class="text-gray-600">{{ userInfo.role }}</p> <!-- 新增角色显示 -->
          <p class="text-gray-600 mt-1">{{ userInfo.email }}</p>
        </div>
        <!-- 注销按钮 -->
        <button class="bg-red-500 text-white px-6 py-3 rounded-full cursor-pointer hover:bg-red-600" @click="logout">
          注销
        </button>
        <el-col :span="12">
          <h5 class="mb-2">菜单</h5>
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo custom-menu-width"
            @open="handleOpen"
            @close="handleClose"
          >
            <el-sub-menu index="1">
              <template #title>
                <el-icon><location /></el-icon>
                <span>Navigator One</span>
              </template>
              <el-menu-item-group title="Group One">
                <el-menu-item index="1-1">item one</el-menu-item>
                <el-menu-item index="1-2">item two</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="Group Two">
                <el-menu-item index="1-3">item three</el-menu-item>
              </el-menu-item-group>
              <el-sub-menu index="1-4">
                <template #title>item four</template>
                <el-menu-item index="1-4-1">item one</el-menu-item>
              </el-sub-menu>
            </el-sub-menu>
            <el-menu-item index="2">
              <el-icon><icon-menu /></el-icon>
              <span>Navigator Two</span>
            </el-menu-item>
            <el-menu-item index="3">
              <el-icon><document /></el-icon>
              <span>Navigator Three</span>
            </el-menu-item>
            <el-menu-item index="4">
              <el-icon><setting /></el-icon>
              <span>Navigator Four</span>
            </el-menu-item>
            <el-menu-item index="5">
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">Click Me
                  <el-icon class="el-icon--right"><caret-bottom /></el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item class="clearfix">
                      comments
                      <el-badge class="mark" :value="12" />
                    </el-dropdown-item>
                    <el-dropdown-item class="clearfix">
                      replies
                      <el-badge class="mark" :value="3" />
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </el-menu-item>
          </el-menu>
        </el-col>
        <!-- 其他侧边栏内容（如链接、按钮等） -->
      </div>
    </aside>
    <!-- 主体内容区 -->
    <main class="flex-1 px-4 py-8 relative w-3/4 ml-14">
      <div class="container mx-auto text-center shadow-2xl bg-white rounded-2xl py-16">
        <!-- 欢迎信息 -->
        <h1 class="text-3xl font-bold mb-4">欢迎使用皮肤病分类与识别系统</h1>
        <p class="text-gray-600 mb-8">
          本系统可以帮助您快速准确地识别皮肤病类型，只需上传皮肤图像即可。
        </p>
        <!-- 图像上传区域 -->
        <div class="mb-12">
          <div class="flex flex-col items-center">
            <el-button type="primary" @click="open = true">Begin Tour</el-button>
            <el-divider />
            <el-upload
              class="upload-demo"
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              :limit="1"
              :on-exceed="handleExceed"
              :auto-upload="false"
            >
              <template #trigger>
                <el-button ref="upload1" type="primary">select file</el-button>
              </template>
              <el-button ref="toServer" class="ml-3" type="success" @click="submitUpload">
                upload to server
              </el-button>
              <el-button ref="search" type="primary">查看</el-button>
              <template #tip>
                <div class="el-upload__tip text-red">
                  limit 1 file, new file will cover the old file
                </div>
              </template>
            </el-upload>
            <div class="demo-image__preview">
              <el-image
                style="width: 100px; height: 100px"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :initial-index="4"
                fit="cover"
              />
            </div>
            <el-tour
              v-model="open"
              type="primary"
              :mask="{style: {boxShadow: 'inset 0 0 15px #333',},color: 'rgba(52,123,149,0.4)',}"
            >
              <el-tour-step
                :target="upload1?.$el"
                title="Upload File"
                description="Put you files here."
              />
              <el-tour-step
                :target="toServer?.$el"
                title="Upload to Server"
                description="Upload your file to server"
              />
              <el-tour-step
                :target="search?.$el"
                title="识别结果"
                description="点击查看您的识别结果及治疗建议"
              />
            </el-tour>
            <p class="text-gray-600 mt-2">支持JPEG、PNG格式，图像大小不超过5MB。</p>
            <img v-if="previewImage" :src="previewImage" alt="预览图像" class="mt-4 w-full max-w-md object-cover rounded-xl" />
          </div>
          <div class="demo-progress mx-auto">
            <el-progress
              :percentage="100"
              :stroke-width="15"
              status="success"
              striped
              striped-flow
              :color="'#82bce6'"
              :duration="20"
            />
          </div>
        </div>
        <section class="mb-12">
          <h2 class="text-2xl font-bold mb-4">最新识别案例</h2>
          <div class="carousel relative overflow-hidden">
            <el-carousel :interval="4000" type="card" height="425px" motion-blur="motion-blur">
              <el-carousel-item v-for="(item,index) in cases" :key="index">
                <div class="relative">
                  <img :src="item.image" :alt="`案例图片${index}`" class="w-full h-full object-cover" />
                  <div class="relative bottom-0 left-0 right-0 p-2 text-white bg-blue-400">
                    <p class="font-bold">{{ item.name }}</p>
                    <p>{{ item.description }}</p>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </section>
        <!-- 示例图像展示区 -->
        <section>
          <h2 class="text-2xl font-bold mb-4">常见皮肤病示例</h2>
          <div class="grid grid-cols-3 gap-4">
            <div class="flex flex-col items-center">
              <el-popover
                :width="300"
                popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
              >
                <template #reference>
                  <img src="../assets/images/case.png" alt="湿疹" class="w-48 h-48 object-cover rounded-full mb-2" />
                </template>
                <template #default>
                  <div
                    class="demo-rich-conent"
                    style="display: flex; gap: 16px; flex-direction: column"
                  >
                    <img src="../assets/images/case.png" alt="湿疹" class="w-48 h-48 object-cover rounded-full mb-2" />
                    <div>
                      <p
                        class="demo-rich-content__name"
                        style="margin: 0; font-weight: 500"
                      >
                        Element Plus
                      </p>
                      <p
                        class="demo-rich-content__mention"
                        style="margin: 0; font-size: 14px; color: var(--el-color-info)"
                      >
                        @element-plus
                      </p>
                    </div>

                    <p class="demo-rich-content__desc" style="margin: 0">
                      Element Plus, a Vue 3 based component library for developers,
                      designers and product managers
                    </p>
                  </div>
                </template>
              </el-popover>
              <span class="text-gray-700">湿疹</span>
              <p class="text-gray-600 mt-1">详细描述和可能的病因...</p>
            </div>
            <div class="flex flex-col items-center">
              <el-popover
                :width="300"
                popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
              >
                <template #reference>
                  <img src="../assets/images/case.png" alt="湿疹" class="w-48 h-48 object-cover rounded-full mb-2" />
                </template>
                <template #default>
                  <div
                    class="demo-rich-conent"
                    style="display: flex; gap: 16px; flex-direction: column"
                  >
                    <img src="../assets/images/case.png" alt="湿疹" class="w-48 h-48 object-cover rounded-full mb-2" />
                    <div>
                      <p
                        class="demo-rich-content__name"
                        style="margin: 0; font-weight: 500"
                      >
                        Element Plus
                      </p>
                      <p
                        class="demo-rich-content__mention"
                        style="margin: 0; font-size: 14px; color: var(--el-color-info)"
                      >
                        @element-plus
                      </p>
                    </div>

                    <p class="demo-rich-content__desc" style="margin: 0">
                      Element Plus, a Vue 3 based component library for developers,
                      designers and product managers
                    </p>
                  </div>
                </template>
              </el-popover><span class="text-gray-700">痤疮</span>
              <p class="text-gray-600 mt-1">详细描述和可能的病因...</p>
            </div>
            <div class="flex flex-col items-center">
              <el-popover
                :width="300"
                popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
              >
                <template #reference>
                  <img src="../assets/images/case.png" alt="湿疹" class="w-48 h-48 object-cover rounded-full mb-2" />
                </template>
                <template #default>
                  <div
                    class="demo-rich-conent"
                    style="display: flex; gap: 16px; flex-direction: column"
                  >
                    <img src="../assets/images/case.png" alt="湿疹" class="w-48 h-48 object-cover rounded-full mb-2" />
                    <div>
                      <p
                        class="demo-rich-content__name"
                        style="margin: 0; font-weight: 500"
                      >
                        Element Plus
                      </p>
                      <p
                        class="demo-rich-content__mention"
                        style="margin: 0; font-size: 14px; color: var(--el-color-info)"
                      >
                        @element-plus
                      </p>
                    </div>

                    <p class="demo-rich-content__desc" style="margin: 0">
                      Element Plus, a Vue 3 based component library for developers,
                      designers and product managers
                    </p>
                  </div>
                </template>
              </el-popover><span class="text-gray-700">银屑病</span>
              <p class="text-gray-600 mt-1">详细描述和可能的病因...</p>
            </div>
          </div>
        </section>
        <section class="mt-24">
          <el-row>
            <el-col :span="6">
              <el-statistic :value="98500">
                <template #title>
                  <div class="text-xl" style="display: inline-flex; align-items: center">
                    Daily active users
                    <el-tooltip
                      effect="dark"
                      content="Number of users who logged into the product in one day"
                      placement="top"
                    >
                      <el-icon style="margin-left: 4px" :size="20">
                        <Warning />
                      </el-icon>
                    </el-tooltip>
                  </div>
                </template>
              </el-statistic>
              <div class="statistic-footer">
                <div class="footer-item">
                  <span>than yesterday</span>
                  <span class="green">
              24%
              <el-icon>
                <CaretTop />
              </el-icon>
            </span>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <el-statistic :value="138">
                <template #title>
                  <div class="text-xl" style="display: inline-flex; align-items: center">
                    Ratio of men to women
                    <el-icon style="margin-left: 4px" :size="20">
                      <Male />
                    </el-icon>
                  </div>
                </template>
                <template #suffix>/100</template>
              </el-statistic>
            </el-col>
            <el-col :span="6">
              <el-statistic :value="98500">
                <template #title>
                  <div class="text-xl" style="display: inline-flex; align-items: center">
                    Total Transactions
                    <el-tooltip
                      effect="dark"
                      content="Number of users who logged into the product in one day"
                      placement="top"
                    >
                      <el-icon style="margin-left: 4px" :size="20">
                        <Warning />
                      </el-icon>
                    </el-tooltip>
                  </div>
                </template>
              </el-statistic>
              <div class="statistic-footer">
                <div class="footer-item">
                  <span>month on month</span>
                  <span class="red">12%
                    <el-icon><CaretBottom /></el-icon>
                  </span>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <el-statistic :value="138">
                <template #title>
                  <div class="text-xl" style="display: inline-flex; align-items: center">
                    Feedback Number
                  </div>
                </template>
                <template #suffix>
                  <el-icon style="vertical-align: -0.125em">
                    <ChatLineRound />
                  </el-icon>
                </template>
              </el-statistic>
            </el-col>
          </el-row>
        </section>
      </div>
    </main>
    <el-backtop :bottom="100">
      <div
        style="
        height: 100%;
        width: 100%;
        background-color: var(--el-bg-color-overlay);
        box-shadow: var(--el-box-shadow-lighter);
        text-align: center;
        line-height: 40px;
        color: #1989fa;
      "
      >
        UP
      </div>
    </el-backtop>
    <!-- 底部版权信息区 -->
    <footer class="bg-gray-100 p-4 text-gray-600 text-center">
      &copy; {{ currentYear }} 皮肤病分类与识别项目组. 保留所有权利。
    </footer>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { genFileId } from 'element-plus'
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
import { CaretBottom } from '@element-plus/icons-vue'
import type { ButtonInstance } from 'element-plus'
import { useTransition } from '@vueuse/core'
import { ChatLineRound, Male, Document, Menu as IconMenu, Location, Setting, } from '@element-plus/icons-vue'

export default defineComponent({
  name: 'Home',
  setup() {
    const source = ref(0)
    const outputValue = useTransition(source, {
      duration: 1500,
    })
    source.value = 172000
    const upload1 = ref<ButtonInstance>()
    const toServer = ref<ButtonInstance>()
    const search = ref<ButtonInstance>()

    const open = ref(false)
    const duration = computed(() => Math.floor(percentage.value / 10))
    const router = useRouter();
    const currentYear = ref(new Date().getFullYear());
    const userInfo = ref({
      name: '游客',
      email: 'user@example.com',
      avatar: 'src/assets/images/avatar.png',
      role: '游客'
    });

    const handleOpen = (key: string, keyPath: string[]) => {
      console.log(key, keyPath)
    }
    const handleClose = (key: string, keyPath: string[]) => {
      console.log(key, keyPath)
    }

    const cases = ref([
      { name: '案例1：湿疹', image: 'src/assets/images/case.png', description: '详细描述和可能的病因...' },
      { name: '案例2：痤疮', image: 'src/assets/images/case.png', description: '详细描述和可能的病因...' },
      { name: '案例3：银屑病', image: 'src/assets/images/case.png', description: '详细描述和可能的病因...' },
      { name: '案例4：湿疹', image: 'src/assets/images/case.png', description: '详细描述和可能的病因...' },
      { name: '案例5：痤疮', image: 'src/assets/images/case.png', description: '详细描述和可能的病因...' },
      { name: '案例6：银屑病', image: 'src/assets/images/case.png', description: '详细描述和可能的病因...' },
      // 可以继续添加更多案例
    ]);

    const handleFileUpload = (event: Event) => {
      const fileInput = event.target as HTMLInputElement;
      if (fileInput.files && fileInput.files[0]) {
        // 处理文件上传逻辑
        console.log(fileInput.files[0]);
      }
    };

    // 用户详情页面跳转函数
    const goToUserCenter = () => {
      router.push('/UserCenter');
    };

    // 疾病分类页面跳转函数
    const goToDiseases = () => {
      router.push('/Diseases');
    };
    // 关于页面跳转函数
    const goToFeedback = () => {
      router.push('/Feedback');
    };

    const value = ref([])
    const handleChange = (value) => {
      console.log(value)
    }

    const options = [
      {
        value: 'inflammatory',
        label: '炎症性皮肤病',
        children: [
          {
            value: 'eczema',
            label: '湿疹',
            children: [
              {
                value: 'atopic_eczema',
                label: '特应性皮炎（湿疹）'
              },
              {
                value: 'contact_eczema',
                label: '接触性皮炎（湿疹）'
              }
            ]
          },
          {
            value: 'dermatitis',
            label: '皮炎',
            children: [
              {
                value: 'seborrheic_dermatitis',
                label: '脂溢性皮炎'
              },
              {
                value: 'perioral_dermatitis',
                label: '口周皮炎'
              }
            ]
          },
          {
            value: 'psoriasis',
            label: '银屑病',
            children: [
              {
                value: 'plaque_psoriasis',
                label: '斑块状银屑病'
              },
              {
                value: 'guttate_psoriasis',
                label: '点滴状银屑病'
              }
            ]
          }
        ]
      },
      {
        value: 'infectious',
        label: '感染性皮肤病',
        children: [
          {
            value: 'bacterial',
            label: '细菌性皮肤病',
            children: [
              {
                value: 'impetigo',
                label: '脓疱疮'
              },
              {
                value: 'furuncle',
                label: '疖'
              }
            ]
          },
          {
            value: 'viral',
            label: '病毒性皮肤病',
            children: [
              {
                value: 'herpes',
                label: '疱疹',
              },
              {
                value: 'verruca',
                label: '疣'
              }
            ]
          },
          {
            value: 'fungal',
            label: '真菌性皮肤病',
            children: [
              {
                value: 'tinea',
                label: '癣病',
              },
              {
                value: 'candidiasis',
                label: '念珠菌病'
              }
            ]
          }
        ]
      },
      {
        value: 'neoplastic',
        label: '肿瘤性皮肤病',
        children: [
          {
            value: 'benign',
            label: '良性皮肤肿瘤',
            children: [
              {
                value: 'nevus',
                label: '痣'
              },
              {
                value: 'hemangioma',
                label: '血管瘤'
              }
            ]
          },
          {
            value: 'malignant',
            label: '恶性皮肤肿瘤',
            children: [
              {
                value: 'melanoma',
                label: '黑素瘤'
              },
              {
                value: 'squamous_cell_carcinoma',
                label: '鳞状细胞癌'
              }
            ]
          }
        ]
      },
      {
        value: 'autoimmune',
        label: '自身免疫性皮肤病',
        children: [
          {
            value: 'lupus',
            label: '红斑狼疮',
            children: [
              {
                value: 'systemic_lupus_erythematosus',
                label: '系统性红斑狼疮'
              },
              {
                value: 'discoid_lupus_erythematosus',
                label: '盘状红斑狼疮'
              }
            ]
          },
          {
            value: 'dermatomyositis',
            label: '皮肌炎',
            children: [
              {
                value: 'juvenile_dermatomyositis',
                label: '幼年皮肌炎'
              },
              {
                value: 'adult_dermatomyositis',
                label: '成人皮肌炎'
              }
            ]
          }
        ]
      },
      {
        value: 'genetic',
        label: '遗传性皮肤病',
        children: [
          {
            value: 'ichthyosis',
            label: '鱼鳞病',
            children: [
              {
                value: 'ichthyosis_vulgaris',
                label: '寻常型鱼鳞病'
              },
              {
                value: 'lamellar_ichthyosis',
                label: '板层状鱼鳞病'
              }
            ]
          },
          {
            value: 'epidermolysis_bullosa',
            label: '大疱性表皮松解症',
            children: [
              {
                value: 'simplex_eb',
                label: '单纯型大疱性表皮松解症'
              },
              {
                value: 'junctional_eb',
                label: '交界型大疱性表皮松解症'
              }
            ]
          }
        ]
      },
      {
        value: 'pigmentary',
        label: '色素性皮肤病',
        children: [
          {
            value: 'vitiligo',
            label: '白癜风',
          },
          {
            value: 'melasma',
            label: '黄褐斑',
          }
        ]
      }
    ];
    const upload = ref<UploadInstance>()

    const handleExceed: UploadProps['onExceed'] = (files) => {
      upload.value!.clearFiles()
      const file = files[0] as UploadRawFile
      file.uid = genFileId()
      upload.value!.handleStart(file)
    }

    const submitUpload = () => {
      upload.value!.submit()
    }
    return {
      currentYear,
      userInfo,
      handleFileUpload,
      previewImage: ref<string | null>(null),
      goToUserCenter,
      goToDiseases,
      cases,
      options,
      value,
      handleChange,
      goToFeedback,
      handleExceed,
      submitUpload,
      CaretBottom,
      duration,
      upload1,
      toServer,
      search,
      open,
      outputValue,
      ChatLineRound,
      Male,Document,
      IconMenu,
      Location,
      Setting,
      handleOpen,
      handleClose
    };
  }
});
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

:global(h2#card-usage ~ .example .example-showcase) {
  background-color: var(--el-fill-color) !important;
}

.statistic-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 16px;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.green {
  color: var(--el-color-success);
}
.red {
  color: var(--el-color-error);
}
.custom-menu-width {
  width: 290px; /* 根据需要调整具体的宽度值，这里设置为200px示例 */
}
</style>
